<template>
  <el-container>
    <el-header height="60px">
      <div class="left">
        <img src="@/assets/images/logo.png" alt="" />
        <div class="title">校园二手书交易管理系统后台</div>
      </div>
      <div class="right">
        <div class="aa"><i class="el-icon-full-screen" @click="quanpin()" style="cursor: pointer;"></i></div>
        <div class="aa"><i class="el-icon-refresh" @click="shuaxin()" style="cursor: pointer;"></i></div>
        <div class="aa">
          <el-dropdown trigger="click" class="nav_up_conten">
            <span class="el-dropdown-link">
              欢 迎 :  {{ huanyin
              }}<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="clearfix">
                <span @click="personal()">个人资料</span>
                <el-badge class="mark" />
              </el-dropdown-item>
              <el-dropdown-item class="clearfix" index="/my">
                <span @click="exit()">安全退出</span>
                <el-badge class="mark" />
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          router
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="$route.path"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>系统首页</span>
            </template>
            <el-menu-item index="/home">首页预览</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>产品管理</span>
            </template>
            <el-menu-item index="/product">产品列表</el-menu-item>
            <el-menu-item index="/unauditeproduct">待审核产品</el-menu-item>
            <el-menu-item index="/recycleProduct">回收站产品</el-menu-item>
            <el-menu-item index="/productcategory">产品分类</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-present"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/order">订单列表</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>会员管理</span>
            </template>
            <el-menu-item index="/user">用户列表</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/system">账户管理</el-menu-item>
            <el-menu-item index="/shuffl">轮播管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      huanyin: sessionStorage.getItem("nickname")
    };
  },
  mounted () {
  },
  created() {
  },
  methods: {
    exit() {
      this.$router.push({ path: "/login" });
      sessionStorage.removeItem("loginname");
      sessionStorage.removeItem("loginpassword");
      sessionStorage.removeItem("nickname");
      sessionStorage.removeItem("id");
    },
    personal() {
      this.$router.push({ path: "/my" });
    },
    //刷新整个页面
    shuaxin(){
      this.reload();
    },
    //全屏 监听 触发键盘f11建
    quanpin(){
    var docElm = document.documentElement;
    //W3C
    if(docElm.requestFullscreen) {
      docElm.requestFullscreen();
    }
    //FireFox
    else if(docElm.mozRequestFullScreen) {
      docElm.mozRequestFullScreen();
    }
    //Chrome等
    else if(docElm.webkitRequestFullScreen) {
      docElm.webkitRequestFullScreen();
    }
    }
  }
};
</script>

<style scoped>
.el-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #444a4f;
  height: 60px;
  line-height: 60px;
  position: sticky; /*固定分成*/
  top: 0;
  z-index: 999;
}
.left,
.right {
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.left img {
  width: 150px;
  height: 40px;
}
.left .title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-left: 20px;
}
.nav_up,
.nav_up_conten {
  color: #fff;
}
.aa{
  margin-right: 12px;
}
.el-aside {
  background-color: #545c64;
  color: rgb(0, 0, 0);
}
.el-main {
  background-color: #eee;
  color: rgb(0, 0, 0);
  text-align: center;
  height: 100vh;
}
.el-menu-vertical-demo i {
  color: #ffffff;
}
.el-menu-item {
  padding-left: 60px;
}
</style>